<template>
  <div class="data-center-main" ref="dataCenter">
    <div class="left-part">
      <div class="partbg">
        <div class="titlefont">类别陈列排面总览</div>
        <div style="display: flex; height: 95%; width: 100%">
          <div
            style="
              width: 50%;
              height: 100%;
              border-right: 1px solid rgba(0, 0, 0, 0.06);
              display: flex;
              flex-direction: column;
            "
          >
            <div
              style="
                width: 100%;
                height: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div style="display: flex; margin-bottom: 20px">
                <img
                  src="@/assets/images/bottleB.png"
                  alt=""
                  style="margin-right: 24px; width: 48px; height: 48px"
                />
                <div>
                  <span class="namefont">本品品类数</span><br /><span
                    class="valuefont"
                    >8,923</span
                  >
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                  margin-bottom: 12px;
                "
              >
                <div class="gray">
                  <span class="info">陈列排面总数</span>
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">排面占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                "
              >
                <div class="gray">
                  <span class="info"
                    >涉及冰柜数<span style="color: #f3f6f9">的</span></span
                  >
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">冰柜占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
            </div>
            <div
              style="
                width: 100%;
                height: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div style="display: flex; margin-bottom: 20px">
                <img
                  src="@/assets/images/bottleY.png"
                  alt=""
                  style="margin-right: 24px; width: 48px; height: 48px"
                />
                <div>
                  <span class="namefont">新品品类数</span><br /><span
                    class="valuefont"
                    >8,923</span
                  >
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                  margin-bottom: 12px;
                "
              >
                <div class="gray">
                  <span class="info">陈列排面总数</span>
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">排面占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                "
              >
                <div class="gray">
                  <span class="info"
                    >涉及冰柜数<span style="color: #f3f6f9">的</span></span
                  >
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">冰柜占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
            </div>
          </div>
          <div
            style="
              width: 50%;
              height: 100%;
              display: flex;
              flex-direction: column;
            "
          >
            <div
              style="
                width: 100%;
                height: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div style="display: flex; margin-bottom: 20px">
                <img
                  src="@/assets/images/bottleG.png"
                  alt=""
                  style="margin-right: 24px; width: 48px; height: 48px"
                />
                <div>
                  <span class="namefont">必铺品品类数</span><br /><span
                    class="valuefont"
                    >8,923</span
                  >
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                  margin-bottom: 12px;
                "
              >
                <div class="gray">
                  <span class="info">陈列排面总数</span>
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">排面占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                "
              >
                <div class="gray">
                  <span class="info"
                    >涉及冰柜数<span style="color: #f3f6f9">的</span></span
                  >
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">冰柜占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
            </div>
            <div
              style="
                width: 100%;
                height: 50%;
                display: flex;
                flex-direction: column;
                align-items: center;
              "
            >
              <div style="display: flex; margin-bottom: 20px">
                <img
                  src="@/assets/images/bottleP.png"
                  alt=""
                  style="margin-right: 24px; width: 48px; height: 48px"
                />
                <div>
                  <span class="namefont">竟品品类数</span><br /><span
                    class="valuefont"
                    >8,923</span
                  >
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                  margin-bottom: 12px;
                "
              >
                <div class="gray">
                  <span class="info">陈列排面总数</span>
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">排面占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
              <div
                style="
                  width: 100%;
                  height: 24px;
                  display: flex;
                  justify-content: space-around;
                "
              >
                <div class="gray">
                  <span class="info"
                    >涉及冰柜数<span style="color: #f3f6f9">的</span></span
                  >
                  <span class="value">1234</span>
                </div>
                <div class="gray">
                  <span class="info">冰柜占比</span>
                  <span class="value">34%</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="partbg" style="height: 462px; position: relative">
        <div class="titlefont">陈列严重不合格点位分析</div>
        <div
          style="width: 100%; height: 90%; border-radius: 8px"
          id="map"
        ></div>
        <div class="status">
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #ec1d23"></div>
            <div style="font-size: 14px; color: #8593a7">纯净度 &lt; 30%</div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #ff7f27"></div>
            <div style="font-size: 14px; color: #8593a7">竟占比 > 50%</div>
          </div>
          <div
            style="
              display: flex;
              flex-direction: row;
              align-items: center;
              justify-content: space-around;
            "
          >
            <div class="dot" style="background-color: #0ed145"></div>
            <div style="font-size: 14px; color: #8593a7">空置率 &lt; 50%</div>
          </div>
        </div>
      </div>
      <div class="partbg" style="height: 312px; position: relative">
        <div
          style="position: absolute; top: 20px; right: 25px; z-index: 50"
          class="info"
        >
          设计冰柜数量：<span style="color: #35404f">2216</span>
        </div>
        <el-select
          style="
            position: absolute;
            top: 50px;
            right: 25px;
            z-index: 100;
            width: 100px;
          "
          v-model="timeValue1"
          size="mini"
          placeholder="请选择"
        >
          <el-option
            v-for="item in TimePeriod"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div style="height: 100%; width: 100%" id="chart2"></div>
      </div>
    </div>
    <div class="right-part">
      <div
        class="partbg"
        style="
          height: 340px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <div
          style="
            display: flex;
            justify-content: space-between;
            width: 100%;
            height: 15px;
            margin-bottom: 5px;
          "
        >
          <span class="titlefont">陈列不合格类型分析（%）</span>
          <span
            style="
              color: #8593a7;
              font-size: 14px;
              font-family: HarmonyOS_Sans_SC_Regular;
            "
            >不合格数量：<span style="color: #fa5050">1</span></span
          >
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-size: 15px;
            font-family: HarmonyOS_Sans_SC_Regular;
            color: #8c8c8c;
          "
        >
          <span>冰柜纯净度</span>
          <el-progress
            :percentage="50"
            style="width: 80%"
            color="#165DFF"
            :stroke-width="16"
            :show-text="false"
          ></el-progress><span class="prose" >50%</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-family: HarmonyOS_Sans_SC_Regular;
            color: #8c8c8c;
          "
        >
          <span>黄金纯位度</span>
          <el-progress
          :percentage="50"
            style="width: 80%"
            color="#14C9C9"
            :stroke-width="16"
            :show-text="false"
          ></el-progress><span class="prose" >50%</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-family: HarmonyOS_Sans_SC_Regular;
            color: #8c8c8c;
          "
        >
          <span>必铺品占比</span>
          <el-progress
          :percentage="50"
            style="width: 80%"
            color="#F7BA1E"
            :stroke-width="16"
            :show-text="false"
          ></el-progress><span class="prose" >50%</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-family: HarmonyOS_Sans_SC_Regular;
            color: #8c8c8c;
          "
        >
          <span>竞品占比</span>
          <el-progress
          :percentage="50"
            style="width: 80%"
            color="#9FDB1D"
            :stroke-width="16"
            :show-text="false"
          ></el-progress><span class="prose" >50%</span>
        </div>
        <div
          style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            font-family: HarmonyOS_Sans_SC_Regular;
            color: #8c8c8c;
          "
        >
          <span>空置占比</span>
          <el-progress
          :percentage="50"
            style="width: 80%"
            color="#3491FA"
            :stroke-width="16"
            :show-text="false"
          ></el-progress><span class="prose" >50%</span>
        </div>
      </div>
      <div class="partbgimg" style="height: 438px; ">
        <div class="titlefont">陈列不合格/改善数量（台）</div>
        <!-- <div
          style="
            width: 100%;
            height: 95%;
            display: flex;
            justify-content: space-around;
            align-items: center;
          "
        >
          <img
            src="@/assets/images/paimianbg.png"
            alt=""
            style="width: 300px; height: 300px"
          />
        </div> -->

        <div
          style="
            float: center;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            height: 95%;
            padding-bottom: 32px;
          "
        >
          <div
            style="display: flex; width: 100%; justify-content: space-around"
          >
            <div class="disqualificationinfo">
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
              <span class="disqualificationinfoname"
                >冰柜纯净度不合格（昨日巡检）
              </span>
              <span class="disqualificationinfovalue">200</span>
            </div>
            <div class="disqualificationinfo2">
              <span class="disqualificationinfovalue" style="color: black"
                >200</span
              >
              <span class="disqualificationinfoname"
                >冰柜纯净度已改善（今日巡检）
              </span>

              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
            </div>
          </div>
          <div
            style="display: flex; width: 100%; justify-content: space-around"
          >
            <div class="disqualificationinfo" style="margin-right: 100px">
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
              <span class="disqualificationinfoname"
                >黄金位纯度不合格（昨日巡检）
              </span>
              <span class="disqualificationinfovalue">200</span>
            </div>
            <div class="disqualificationinfo2">
              <span class="disqualificationinfovalue" style="color: black"
                >200</span
              >
              <span class="disqualificationinfoname"
                >黄金位纯度已改善（今日巡检）
              </span>
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
            </div>
          </div>
          <div
            style="display: flex; width: 100%; justify-content: space-around"
          >
            <div class="disqualificationinfo" style="margin-right: 200px">
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
              <span class="disqualificationinfoname"
                >必铺品占比不合格（昨日巡检）
              </span>
              <span class="disqualificationinfovalue">200</span>
            </div>
            <div class="disqualificationinfo2">
              <span class="disqualificationinfovalue" style="color: black"
                >200</span
              >
              <span class="disqualificationinfoname"
                >必铺品占比已改善（今日巡检）
              </span>
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
            </div>
          </div>
          <div
            style="display: flex; width: 100%; justify-content: space-around"
          >
            <div class="disqualificationinfo" style="margin-right: 100px">
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
              <span class="disqualificationinfoname"
                >竟占比不合格（昨日巡检）
              </span>
              <span class="disqualificationinfovalue">200</span>
            </div>
            <div class="disqualificationinfo2">
              <span class="disqualificationinfovalue" style="color: black"
                >200</span
              >
              <span class="disqualificationinfoname"
                >竟占比以改善（今日巡检）
              </span>
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
            </div>
          </div>
          <div
            style="display: flex; width: 100%; justify-content: space-around"
          >
            <div class="disqualificationinfo">
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
              <span class="disqualificationinfoname"
                >空置占比不合格（昨日巡检）
              </span>
              <span class="disqualificationinfovalue">200</span>
            </div>
            <div class="disqualificationinfo2">
              <span class="disqualificationinfovalue" style="color: black"
                >200</span
              >
              <span class="disqualificationinfoname"
                >空置占比以改善（今日巡检）
              </span>
              <img
                src="@/assets/images/computer.png"
                alt=""
                style="width: 32px; height: 32px"
              />
            </div>
          </div>
        </div>
      </div>
      <div class="partbg" style="height: 382px; position: relative">
        <el-select
          style="
            position: absolute;
            top: 20px;
            right: 45px;
            z-index: 100;
            width: 100px;
          "
          v-model="timeValue1"
          size="mini"
          placeholder="请选择"
        >
          <el-option
            v-for="item in TimePeriod"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <div style="height: 100%; width: 100%" id="chart5"></div>
      </div>
    </div>
  </div>
</template>

<script>
// import { dataView, getDeviceInfo, dataHgqs, getTodayQualifiedDiviceCount } from '@/api/dataCenter/index'
import AMapLoader from "@amap/amap-jsapi-loader";
window._AMapSecurityConfig = {
  securityJsCode: "591e46c8fe130643630bd7e02faf5c49",
};

export default {
  components: {},
  data() {
    return {
      defaultType: 2,
      iconUrl: "bottleY.png",
      adcode: [
        { adcode: "110000", name: "北京市" },
        { adcode: "120000", name: "天津市" },
        { adcode: "130000", name: "河北省" },
        { adcode: "140000", name: "山西省" },
        { adcode: "150000", name: "内蒙古自治区" },

        { adcode: "210000", name: "辽宁省" },
        { adcode: "220000", name: "吉林省" },
        { adcode: "230000", name: "黑龙江省" },

        { adcode: "310000", name: "上海市" },
        { adcode: "320000", name: "江苏省" },
        { adcode: "330000", name: "浙江省" },
        { adcode: "340000", name: "安徽省" },
        { adcode: "350000", name: "福建省" },
        { adcode: "360000", name: "江西省" },
        { adcode: "370000", name: "山东省" },

        { adcode: "410000", name: "河南省" },
        { adcode: "420000", name: "湖北省" },
        { adcode: "430000", name: "湖南省" },
        { adcode: "440000", name: "广东省" },
        { adcode: "450000", name: "广西壮族自治区" },
        { adcode: "460000", name: "海南省" },

        { adcode: "500000", name: "重庆市" },
        { adcode: "510000", name: "四川省" },
        { adcode: "520000", name: "贵州省" },
        { adcode: "530000", name: "云南省" },
        { adcode: "540000", name: "西藏自治区" },

        { adcode: "610000", name: "陕西省" },
        { adcode: "620000", name: "甘肃省" },
        { adcode: "630000", name: "青海省" },
        { adcode: "640000", name: "宁夏回族自治区" },
        { adcode: "650000", name: "新疆维吾尔自治区" },

        { adcode: "710000", name: "台湾省" },
        { adcode: "810000", name: "香港特别行政区" },
        { adcode: "820000", name: "澳门特别行政区" },
      ],
      adcodeList: [],
      dispalyPanelChart: "",
      TimePeriod: [
        {
          value: "按日查询",
          label: "按日查询",
        },
        {
          value: "按周查询",
          label: "按周查询",
        },
        {
          value: "按月查询",
          label: "按月查询",
        },
      ],
      timeValue: "按日查询",
      timeValue1: "按日查询",
      classifyChose: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "仅看本品",
          label: "仅看本品",
        },
        {
          value: "仅看新品",
          label: "仅看新品",
        },
        {
          value: "仅看竞品",
          label: "仅看竟品",
        },
      ],
      classifyValue: "仅看本品",
      classifyValue1: "仅看本品",
      classify: "竞",
      //陈列排面总览
      dispalyPanel: {
        color: ["#5B6BF4", "#00B050", "#FFC000", "#767171"],
        title: {
          text: "陈列牌面总览",
          left: "left",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 18,
            color: "#333",
            fontSyle: "normal",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
        },
        // legend: {
        //     orient: 'vertical',
        //     left: 'left',
        //     top: 'center'
        // },
        series: [
          {
            //name: 'Access From',
            type: "pie",
            radius: "50%",
            center: ["60%", "50%"],
            data: [
              { value: 1048, name: "本品" },
              { value: 735, name: "新品" },
              { value: 580, name: "竞品" },
              { value: 484, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      },
      //单品陈列排面数总览
      categoryLayout: {
        color: "#165DFF",
        title: {
          text: "单品陈列排面数总览",
          lleft: "center",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        label: {},
        grid: {
          left: "5%",
          right: "1%",
          bottom: "8%",
          top: '30%',
          // containLabel: true
        },
        xAxis: {
          type: "category",
          data: [
            "类别1",
            "类别2",
            "类别3",
            "类别4",
            "类别5",
            "类别6",
            "类别7",
            "类别8",
            "类别9",
            "类别10",
          ],
          axisLine: {
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#8C8C8C",
            },
          },
        },
        yAxis: {
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#8C8C8C",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //show: false,
              type: "dashed",
              color: "#DFDFDF",
            },
          },
        },
        series: [
          {
            data: [5, 4, 1, 8, 3, 9, 4, 4, 6, 9],
            type: "bar",
            barWidth: 20,
          },
        ],
      },
      //冰柜品类占比分析
      proportionAnalysis: {
        color: "rgb(255,207,53)",
        title: {
          text: "冰柜品类占比分析",
          left: "center",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 18,
            color: "#333",
            fontSyle: "normal",
            fontWeight: "normal",
          },
        },
        grid: {
          left: "3%",
          right: "7%",
          bottom: "10%",
          //top: '20%',
          // containLabel: true
        },
        xAxis: {
          name: "竟占比（%）",
          nameLocation: "center", // x轴name处于x轴的什么位置
          nameTextStyle: {
            padding: [10, -680, 0, 0, 0],
          },
          type: "category",
          data: ["0", "20", "30", "40", "50", "60", "70", "80", "90", "100"],
          splitLine: {
            //网格线
            show: true,
          },
          axisLine: {
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#8C8C8C",
            },
          },
        },
        yAxis: {
          name: "冰柜数（台）",
          type: "value",
          axisLine: {
            show: false,
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisTick: {
            show: false,
          },
          axisLabel: {
            //x轴文字的配置
            show: true,
            textStyle: {
              color: "#8C8C8C",
            },
          },
          splitLine: {
            show: true,
            lineStyle: {
              //show: false,
              //type: 'dashed',
              color: "#DFDFDF",
            },
          },
        },
        series: [
          {
            data: [1, 3, 3, 5, 4, 7, 9, 4, 5],
            type: "line",
            smooth: true,
          },
        ],
      },
      //单品覆盖统计
      coverageStatistics: {
        color: ["#A2ACFF", "#FFCB47", "#485BF2"],
        title: {
          text: "单品覆盖统计",
          left: "center",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 18,
            color: "#333",
            fontSyle: "normal",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            crossStyle: {
              color: "#999",
            },
          },
        },
        label: {
          show: true,
          position: "top",
        },
        legend: { y: "bottom", data: ["全柜", "仅看黄金位", "全柜趋势"] },
        grid: {
          left: "0%",
          right: "3%",
          bottom: "10%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "2024/3/15",
              "2024/3/16",
              "2024/3/17",
              "2024/3/18",
              "2024/3/19",
              "2024/3/20",
              "2024/3/21",
            ],
            axisPointer: {
              type: "shadow",
            },
            axisLine: {
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },

            //max: 100
          },
        ],
        yAxis: [
          {
            type: "value",
            //name: 'sell',
            min: 0,
            max: 15,
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                show: false,
                type: "dashed",
                color: "#8C8C8C",
              },
            },
            // axisLabel: {
            //   formatter: '{value} ml'
            // }
          },
          {
            type: "value",
            //name: 'persent',
            min: 0,
            max: 1,
            axisLabel: {
              color: "#8C8C8C",
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "#8C8C8C", //坐标轴的颜色
              },
            },
            axisTick: {
              show: false,
            },
            splitLine: {
              lineStyle: {
                type: "dashed",
                color: "#8C8C8C",
              },
            },
            // axisLabel: {
            //   formatter: '{value} °C'
            // }
          },
        ],
        series: [
          {
            name: "全柜",
            type: "bar",
            data: [15, 12, 10, 8, 6, 7, 4],
            barWidth: 20,
            barGap: "0%",
            animationDuration: 4000,
            animationEasing: "cubicInOut",
            // barCategoryGap: '1%'
          },
          {
            name: "仅看黄金位",
            type: "bar",
            barWidth: 20,
            data: [4, 3, 6, 7, 2, 6, 2],
            animationDuration: 4000,
            animationEasing: "cubicInOut",
          },
          {
            name: "全柜趋势",

            yAxisIndex: 1,
            type: "line",
            data: [0.8, 0.9, 0.4, 0.2, 0.7, 0.5, 0.8],
            barWidth: 20,
            animationDuration: 4000,
            animationEasing: "cubicInOut",
          },
        ],
      },
      //单柜品类数统计
      cabinetStatistics: {
        color: ["#165DFF", "#14C9C9"],
        title: {
          text: "单柜品类丰富度分析",
          //left: "center",
          textStyle: {
            fontFamily: "HarmonyOS_Sans_SC_Medium",
            fontSize: 16,
            color: "#35404f",
            left: "0%",
            fontWeight: "500",
          },
        },
        grid: {
          left: "2%",
          right: "3%",
          top:'25%',
          bottom: "0%",
          containLabel: true,
        },
        legend: { top: "40", right: "20", data: ["本品", "竞品"] },
        xAxis: {
          axisPointer: {
            type: "shadow",
          },
          axisLine: {
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          splitLine: {
            show: false,
          },
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "#8C8C8C", //坐标轴的颜色
            },
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              show: false,
              type: "dashed",
              color: "#8C8C8C",
            },
          },
        },
        series: [
          {
            name: "本品",
            symbolSize: 12,
            data: [
              [2, 3],
              [4, 6],
              [3, 5],
            ],
            type: "scatter",
          },
          {
            name: "竞品",
            symbolSize: 12,
            data: [
              [5, 3],
              [3, 6],
              [7, 2],
            ],
            type: "scatter",
          },
        ],
      },
    };
  },
  mounted() {
    //this.getDataView()
    this.init();
    this.initAMap();
    // this.curTime = new Date().toLocaleTimeString();
    // this.curDate = new Date().toLocaleDateString();
  },
  beforeDestroy() {},
  methods: {
    init() {
      // var chartDom = document.getElementById("chart1");
      // this.dispalyPanelChart = this.$echarts.init(chartDom);
      // this.dispalyPanelChart.setOption(this.dispalyPanel);

      var chartDom = document.getElementById("chart2");
      var categoryLayoutChart = this.$echarts.init(chartDom);
      categoryLayoutChart.setOption(this.categoryLayout);

      // var chartDom = document.getElementById("chart3");
      // var proportionAnalysisChart = this.$echarts.init(chartDom);
      // proportionAnalysisChart.setOption(this.proportionAnalysis);

      // var chartDom = document.getElementById("chart4");
      // var coverageStatisticsChart = this.$echarts.init(chartDom);
      // coverageStatisticsChart.setOption(this.coverageStatistics);

      var chartDom = document.getElementById("chart5");
      var cabinetStatisticsChart = this.$echarts.init(chartDom);
      cabinetStatisticsChart.setOption(this.cabinetStatistics);

      window.onresize = () => {
        // this.dispalyPanelChart.resize();
        categoryLayoutChart.resize();
        // proportionAnalysisChart.resize();
        // coverageStatisticsChart.resize();
        cabinetStatisticsChart.resize();
      };
    },

    getDataView() {
      this.adcodeList = [];
      // 获取大屏数据
      dataView({
        // userId: this.customerID,
        userId: this.$store.state.user.id,
      })
        .then((res) => {
          console.log("## dataView ==> ", res);
          const {} = res.data;
          this.mainData = res.data;
          this.adcode.map((item1) => {
            this.mainData.provinceList.map((item2) => {
              if (item1.name == item2.province)
                this.adcodeList.push(item1.adcode);
            });
          });
        })
        .catch((err) => {
          this.$message.error(err.message);
          console.log("## err", err);
        })
        .finally(() => {
          this.initAMap();
          this.init();
        });
    },

    /**初始化 */
    initAMap() {
      AMapLoader.load({
        key: "fdf3c1227382941015a1295cafb4d0a7", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: [
          "AMap.ControlBar",
          "AMap.HawkEye",
          "AMap.ToolBar",
          "AMap.CitySearch",
          "AMap.Geocoder",
          "AMap.MapType",
          "AMap.DistrictSearch",
          "AMap.Polygon",
          "AMap.DistrictLayer",
          "AMap.Pixel",
          "AMap.InfoWindow",
        ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
      })
        .then((AMap) => {
          // 注册容器
          this.map = new AMap.Map("map", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 4, // 初始化地图级别
            resizeEnable: true,
            center: [108.5525, 34.3227], // 初始化地图中心点位置
          });

          var disCountry = new AMap.DistrictLayer.Province({
            zIndex: 10,
            //adcode: ['520000', '540000', '530000', '500000', '360000', '340000', '510000', '350000', '430000'],
            adcode: this.adcodeList,
            SOC: "CHN",
            depth: 0,
            styles: {
              "nation-stroke": "#f09",
              //'coastline-stroke': [0.85, 0.63, 0.94, 1],
              "province-stroke": "rgb(255,255,255)", //省边界颜色
              "city-stroke": "rgb(255,255,255)", //市边界颜色
              fill: "rgba(100, 116, 255, 0.2)",
            },
          });
          disCountry.setMap(this.map);
          var infoWin = new AMap.InfoWindow({
            closeWhenClickMap: true,
          });
          disCountry.on("click", (ev) => {
            console.log("ev", ev);
            var originalEv = ev.origin.originEvent;
            console.log("clientx", originalEv.clientX, originalEv.clientY);
            var lnglat = this.map.containerToLngLat(
              new AMap.Pixel(
                originalEv.clientX - 1050,
                originalEv.clientY - 530
              )
            ); //坐标有偏移手动修正 -90
            var feature = ev.feature;
            var value = ev.value;
            var property = ev.props.NAME_CHN;
            console.log("property", property);
            infoWin.open(this.map, lnglat);
            console.log("lnglat", lnglat);
            var content = [
              property,
              "<br>",
              "设备数量：" + this.deviceNum(property),
              // this.mainData.provinceList.map((item) => {
              //     if (item.province == property)
              //         return item.count
              // })
            ];
            infoWin.setContent(content.join(""));
          });
        })
        .catch((e) => {
          console.log(e);
        });
    },
    deviceNum(p) {
      var num = 0;
      this.mainData.provinceList.map((item) => {
        if (item.province == p) num = item.count;
      });
      return num;
    },
  },
};
</script>

<style lang="scss" scoped>
.data-center-main {
  background-color: #f3f3f3;
  width: 100%;
  height: calc(170vh-85px);
  display: flex;
  flex-direction: row;
  padding: 1%;
}

.left-part {
  width: 46%;
  //padding: 10px;
  margin-right: 1vw;
  display: flex;
  flex-direction: column;
}
.right-part {
  width: 54%;
  //padding: 10px;
  display: flex;
  flex-direction: column;
}
.partbg {
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  height: 386px;
  margin-bottom: 1vw;
  padding: 16px;
}
.partbgimg {
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  height: 386px;
  margin-bottom: 1vw;
  padding: 16px;
  background-image: url("../../../../assets/images/paimianbg.png") ;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 300px;
}
.titlefont {
  font-family: HarmonyOS_Sans_SC_Medium;
  margin-right: 10px;
  font-size: 16px;
  color: #35404f;
  font-weight: 500;
  margin-bottom: 20px;
}
.gray {
  background-color: #f3f6f9;
  height: 100%;
  width: 45%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.info {
  font-family: HarmonyOS_Sans_SC_Medium;
  font-size: 14px;
  color: #8593a7;
  font-weight: 400;
}
.value {
  font-family: HarmonyOS_Sans_SC_Medium;
  font-size: 14px;
  color: #35404f;
  font-weight: 400;
}
.namefont {
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 16px;
  color: #35404f;
  font-weight: 400;
  margin-bottom: 8px;
  margin-bottom: 8px;
}
.valuefont {
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 28px;
  color: #35404f;
  font-weight: 500;
}
.disqualificationinfo {
  background: linear-gradient(
    270deg,
    rgba(251, 252, 255, 0.36) 0%,
    rgba(245, 248, 255, 1) 100%
  );
  border-radius: 4px;
  width: 302px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 10;
}
.disqualificationinfo2 {
  background: linear-gradient(
    90deg,
    rgba(251, 252, 255, 0.36) 0%,
    rgba(245, 248, 255, 1) 100%
  );
  border-radius: 4px;
  width: 302px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-around;
  z-index: 10;
}
.disqualificationinfoname {
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 14px;
  color: #8593a7;
  font-weight: 400;
}
.disqualificationinfovalue {
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 20px;
  color: #ff2600;
  font-weight: 600;
}
.partOne {
  width: 100%;
  height: 400px;
  background-color: #fff;
  border-radius: 8px;
  margin-bottom: 1vw;
  display: flex;
  padding: 10px;
  justify-content: space-around;
}

.partTwo {
  width: 100%;
  height: 300px;
  //background-color: #fff;
  border-radius: 8px;
  margin-bottom: 1vw;
  display: flex;
  //padding: 10px;
  justify-content: space-between;
}

.ctrol {
  position: absolute;
  top: 25%;
  left: 0%;
  display: flex;
  flex-direction: column;
  height: 50%;
  width: 100px;
  justify-content: space-around;
  z-index: 100;
}

.btn {
  width: 80px;
  height: 25px;
  border-radius: 8px;
  background: rgb(255, 207, 53);
  font-family: "HarmonyOS_Sans_SC_Regular";
  display: flex;
  justify-content: center;
  align-items: center;
}

.chartPart {
  width: 49.5%;
  height: 100%;
}

.ratetable {
  width: 40%;
  height: 80%;
  border-left: solid 1px rgb(255, 207, 53);
  border-top: solid 1px rgb(255, 207, 53);
  padding: 15px;
  margin-top: 7%;
  margin-left: 5%;
  position: relative;
}

.ratetable img {
  position: absolute;
  top: -15px;
  left: -15px;
  width: 30px;
}

.line {
  background-color: rgb(255, 207, 53);
  width: 100%;
  height: 16%;
  display: flex;
  margin-bottom: 5px;
  justify-content: space-between;
  padding: 0px 10px;
  align-items: center;
  font-family: "HarmonyOS_Sans_SC_Regular";
}

.prose{
  font-family: "HarmonyOS_Sans_SC_Regular";
  font-size: 14px;
  color: #86909c;
  font-weight: 400;
}

.status {
  z-index: 600;
  width: 132px;
  height: 114px;
  position: absolute;
  bottom: 20px;
  left: 38px;
  border-radius: 8px;
  padding: 10px;
  background-color: white;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

.dot {
  height: 10px;
  width: 10px;
  background-color: #ccc;
  border-radius: 50%;
}

.nonconformityAnalysis {
  width: 40%;
  height: 100%;
  border-radius: 8px;
  padding: 10px;
  //position: relative;
  background-color: white;
  display: flex;
  flex-direction: column;
  //justify-content:space-between;
  padding-right: 0px;
  //margin-right: 1vw;
}

.unqualifiedNum {
  width: 20%;
  height: 100%;
  border-right: solid 1px rgb(68, 114, 1196);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 5px 20px;
}

// .titleFont {
//   font-family: "HarmonyOS_Sans_SC_Regular";
//   font-size: 20px;
//   color: #333;
// }

.numFont {
  font-family: "HarmonyOS_Sans_SC_Black";
  font-size: 30px;
  margin: 3px;
  margin-bottom: 30%;
}
::v-deep.el-progress-bar__outer {
  margin-right: 20px;
}
</style>
